<template>
	<div class="content-border-bg content-fade-left">
		<small-title :title="titleSet+'平均拥堵指数'" />
		<div class="sub-title">
			<p>平均拥堵指数</p>
		</div>
		<div id="chart" class="left-chart"></div>
	</div>
</template>
<script>
	import {
		defineComponent,
		inject
	} from 'vue';
	import smallTitle from '@/components/smallTitle/index.vue';

	export default defineComponent({
		components: {
			smallTitle
		},
		props: {
			titleSet: {
				type: String,
				default: "今日"
			}
		},
		setup() {
			const echarts = inject('echarts');
			const chart = (data, type) => {
				const legendData = [];
				const seriesData = [];
				// 根据 type 动态决定图表类型
				const chartType = type > 1 ? 'line' : 'bar';

				data.data.map((item) => {
					legendData.push(item.name);
					seriesData.push({
						name: item.name,
						type: chartType, // 动态设置图表类型
						barWidth: chartType === 'bar' ? 5 : undefined, // 仅在柱状图时设置宽度
						barGap: chartType === 'bar' ? "200%" : undefined, // 仅在柱状图时设置间距
						barCategoryGap: chartType === 'bar' ? 20 : undefined, // 仅在柱状图时设置分类间距
						data: item.data,
					});
				});
				const dsiab_com = document.getElementById('chart');
				dsiab_com.removeAttribute('_echarts_instance_');

				const chart = echarts.init(document.getElementById('chart'), null, {
					width: 550,
				});

				// 动态设置 Y 轴最小值和步进
				const option = {
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						itemHeight: 10,
						itemWidth: 10,
						textStyle: {
							fontSize: 14,
							color: '#E6E6E6FF',
							lineHeight: 8,
							padding: [0, 0, -3, 0],
							rich: {
								a: {
									verticalAlign: 'middle',
								},
							},
						},
						data: legendData,
						x: 'center',
						y: 'top',
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						data: data.xAxis,
						axisTick: {
							show: false,
						},
					}, ],
					yAxis: [{
						type: 'value',
						min: 1, // 设置 Y 轴起点为 1
						interval: 0.1, // 设置步进为 0.1
						axisLabel: {
							textStyle: {
								fontSize: 12,
								color: '#ffffff',
							},
						},
						splitLine: {
							lineStyle: {
								type: 'dashed', // 虚线
							},
							show: true, // 显示网格线
						},
					}, ],
					grid: {
						top: '15%',
						right: '5%',
						left: '10%',
						bottom: '9%',
					},
					series: seriesData,
				};

				setTimeout(() => {
					chart.setOption(option);
				}, 500);
			};

			return {
				chart
			};
		},
	});
</script>
<style lang="less" scoped>
	.content-border-bg {
		width: 30%;
		margin: 30px 0 0 30px;
		max-height: 80%;
		height: 80%;
		// position: relative;
		// z-index: 4;
		// width: 684px;
		// height: 646px;
		// margin-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 100%;
			height: 42px;
			margin-top: 24px;
			display: flex;
			align-items: center;
			background: url(@/assets/images/report/leftTitle.png) no-repeat;

			p {
				font-size: 20px;
				margin-left: 26px;
				color: white;
				font-weight: 400;
			}
		}

		.sub-title {
			background: url(@/assets/images/report/leftSubTitle.png) no-repeat;
			margin-top: 25px;
			width: 100%;
			height: 25px;

			p {
				margin-left: 21px;
				color: white;
				font-size: 16px;
			}
		}

		.left-chart {
			height: 480px;
			width: 100%;
			z-index: 800;
			margin-top: 40px;
		}
	}
</style>